//商品放大镜效果
(function () {
    //动态添加图片元素
    var thumbImg = document.querySelector('#thumbImg');//获取ul
    var smallImg = document.querySelector('#smImg');//获取小图片
    var bigImg = document.querySelector('#bgImg');//获取大图片

    var smImgBox = document.querySelector('#smImgBox'); // 获取小图片包裹元素
    var bgImgBox = document.querySelector('#bgImgBox');//获取大图片包裹盒子
    var leftBtn=document.querySelector('#leftBtn');//获取左按钮
    var rightBtn=document.querySelector('#rightBtn');//获取右按钮
    var thumbBox=document.querySelector('#thumbBox');//获取缩略图包裹盒子
    var mask = document.querySelector('#mask');
    goodData.imgsrc.forEach(function (item, index) {
        var li = document.createElement('li');
        var img = document.createElement('img');
        img.src = item.s;
        li.appendChild(img);
        thumbImg.appendChild(li);
        li.onclick = function () {
            smallImg.src = item.s;
            bigImg.src = item.b;
        }
    });
    //添加鼠标进入事件
    smImgBox.onmouseenter = function () {
        mask.style.display = 'block';
        bgImgBox.style.display='block';
        //添加鼠标移动事件
        smImgBox.onmousemove = function (event) {
            
            var maskLeft = event.clientX - smImgBox.getBoundingClientRect().x - mask.offsetWidth / 2;
            var maskTop = event.clientY - smImgBox.getBoundingClientRect().y - mask.offsetHeight / 2;
            if(maskLeft<=0){
                maskLeft=0;
            }else if(maskLeft>smImgBox.clientWidth-mask.offsetWidth){
                maskLeft=smImgBox.clientWidth-mask.offsetWidth
            }
            if(maskTop<=0){
                maskTop=0;
            }else if(maskTop>smImgBox.clientHeight-mask.offsetHeight){
                maskTop=smImgBox.clientHeight-mask.offsetHeight;
            }

            mask.style.left = maskLeft + 'px';
            mask.style.top = maskTop + 'px';
            bgImgBox.scrollLeft=maskLeft*2;
            bgImgBox.scrollTop=maskTop*2;
        }
    }
    //添加鼠标移除事件
    smImgBox.onmouseleave = function () {
        mask.style.display = 'none';
        bgImgBox.style.display = 'none';
    }
    //左右翻页
    var imgWidth=thumbImg.firstElementChild.offsetWidth+parseInt(window.getComputedStyle(thumbImg.firstElementChild).marginRight);
    var moveX=0;
    rightBtn.onclick=function(){
        moveX+=imgWidth*3;
        if(moveX>=thumbImg.children.length*imgWidth-imgWidth*5){
            moveX=thumbImg.children.length*imgWidth-imgWidth*5;
        }
        thumbImg.style.left=-moveX+'px';
    }
    leftBtn.onclick=function(){
        moveX-=imgWidth*3;
        if(moveX<=0){
            moveX=0;
        }
        thumbImg.style.left=-moveX+'px';
    }
})();

//添加购买数据
(function(){
    var goodTitle=document.querySelector('#goodTitle');
    goodTitle.innerHTML=goodData.goodsDetail.title;
    document.querySelector('#recommend').innerHTML=goodData.goodsDetail.recommend;
    document.querySelector('#money').innerHTML=goodData.goodsDetail.price;
    document.querySelector('#proContent').innerHTML=goodData.goodsDetail.promoteSales.type? '<span class="add-buy">'+goodData.goodsDetail.promoteSales.type+'</span> '+goodData.goodsDetail.promoteSales.content:goodData.goodsDetail.promoteSales.content;
    document.querySelector('#support').innerHTML=goodData.goodsDetail.support;
    document.querySelector('#toAddress').innerHTML=goodData.goodsDetail.address;
    document.querySelector('#comment').innerHTML='累计评价'+goodData.goodsDetail.evaluateNum
    var buyBottom=document.querySelector('#buyBottom');
    goodData.goodsDetail.crumbData.forEach(function(dlItem,dlIndex){
        var dl=document.createElement('dl');
        dl.dataset.dlIndex=dlIndex;//给dl添加自定义索引
        var dt=document.createElement('dt');
        dt.innerHTML=dlItem.title;
        dl.appendChild(dt);
        dlItem.data.forEach(function(item,index){
            var dd=document.createElement('dd');
            dd.innerHTML=item.type;
            dd.dataset.changePrice=item.changePrice;
            dl.appendChild(dd);
        });
        dl.querySelector('dd').classList.add('active');
        buyBottom.appendChild(dl);
    });
    
})();

//设置商品选项参数
(function(){
    var chooseArea=document.querySelector('#chooseArea'); //获取选中标签的包裹元素
    var dds=document.querySelectorAll('#buyBottom dl dd'); //获取dd集合
    var dls=document.querySelectorAll('#buyBottom dl');//获取dl集合
    var money=document.querySelector('#money');//获取价格的元素
    var buyNum=document.querySelector('#buyNum');//获取购买输入框
    var add=document.querySelector('#add');//获取加号按钮
    var reduce= document.querySelector('#reduce');//获取减号按钮
    var mainPrice=document.querySelector('#mainPrice');//获取加价购主商品价格
    var packagePrice=document.querySelector('#packagePrice');//获取加价购之后的价格
    var groups=document.querySelectorAll('#groups input[type=checkbox]');//获取几个选择框
    
    


    var totalPrice=goodData.goodsDetail.price;//定义总价等于初始值
    var allPrice=totalPrice;//定义加价购总价
    var eleArr=new Array(goodData.goodsDetail.crumbData.length);//分别存储四个元素的数组
    // console.log(eleArr);
    dds.forEach(function(dd,ddIndex){
        //给每个dd添加点击事件
        dd.onclick=function(){
            this.parentNode.querySelectorAll('dd').forEach(function(item,index){
                item.classList.remove('active');//移除同一个父元素下的兄弟元素
            });
            this.classList.add('active');
            eleArr[dd.parentNode.dataset.dlIndex]=dd;//将选中的元素添加到数组当中
            // console.log(eleArr);
            chooseArea.innerHTML='';//添加之前先清空内容
            eleArr.forEach(function(spanItem,spanIndex){//生成元素添加到chooseArea中
                var spanEle=document.createElement('span');
                spanEle.classList.add('mark');
                spanEle.dataset.spanIndex=spanIndex;//给span设置顺序索引
                spanEle.innerHTML=spanItem.innerHTML+'<i>&times;</i>';
                chooseArea.appendChild(spanEle);
            });
            // 给叉号设置点击删除事件
            var delBtns=chooseArea.querySelectorAll('i');
            // console.log(delBtns);
            delBtns.forEach(function(delItem,delIndex){
                delItem.onclick=function(){
                    this.parentNode.parentNode.removeChild(delItem.parentNode);
                    delete eleArr[delItem.parentNode.dataset.spanIndex];//清除数组内的元素但是保留位置
                    //清除当前的选中
                    dls[delItem.parentNode.dataset.spanIndex].querySelectorAll('dd').forEach(function(items,index){
                        items.classList.remove('active');
                    })
                    dls[delItem.parentNode.dataset.spanIndex].children[1].classList.add('active');
                    getPrice();
                }
            });
            getPrice();
        }
    })
    mainPrice.innerHTML='&yen;'+totalPrice;//设置加价购主商品初始价格
    //点击加号按钮
    add.onclick=function(){
        buyNum.value++;
        getPrice()
    }
    //点击减号按钮
    reduce.onclick=function(){
        buyNum.value--;
        if(buyNum.value<1){
            buyNum.value=1;
        }
        getPrice();
    }
    //输入框输入时
    buyNum.onchange=function(){
        if(isNaN(buyNum.value)){
            buyNum.value=1;
        }else {
            buyNum.value=parseInt(buyNum.value);
        }
        getPrice()
    }
    //遍历加价购选择框
    groups.forEach(function(group,index){
        group.onclick=function(){
            getPrice();
        }
    })





    //封装获取价格的函数
    function getPrice(){
        var price=goodData.goodsDetail.price;//设置初始价格
        eleArr.forEach(function(item,index){
            price+=Number(item.dataset.changePrice);//根据选项改变价格
        });
        totalPrice=price*buyNum.value;
        allPrice=totalPrice
        groups.forEach(function(item,index){
            if(item.checked){
                allPrice+=Number(item.value);
            }
        })
        packagePrice.innerHTML='&yen;'+allPrice;
        money.innerHTML=totalPrice;
        mainPrice.innerHTML='&yen;'+totalPrice;

    }

})();

//侧边栏选项卡
(function(){
    // 获取选项卡集合
    var asideTitles=document.querySelectorAll('#asideTitle h4');//获取侧边栏选项卡标题
    var asideContents=document.querySelectorAll('#asideMain .aside-content');//获取侧边栏选项卡内容
    asideTitles.forEach(function(title,index){
        title.onclick=function(){
            //排他
            asideTitles.forEach(function(item,index){
                item.classList.remove('active');
                asideContents[index].classList.remove('active');
            });
            this.classList.add('active');
            asideContents[index].classList.add('active');
        }
    });

})();


//商品详选项卡
(function(){
    var detailsNav=document.querySelectorAll('#detalisNav li');//获取选项卡标题集合
    var detailsPage=document.querySelectorAll('#detailsPage>li');//获取选项卡内容集合
    detailsNav.forEach(function(nav,index){
        nav.onclick=function(){
            //排他
            detailsNav.forEach(function(item,index){
                item.classList.remove('active');
                detailsPage[index].classList.remove('active');
            });
            this.classList.add('active');
            detailsPage[index].classList.add('active');
        }
    });
})();



//侧边栏
(function(){
    var topBtn=document.querySelector('.topbtn');//顶部展开收起的按钮
    var bodyAside=document.querySelector('.body-aside');//获取整个侧边栏
    var lis=document.querySelectorAll('.list li');//获取li
    var toTop=document.querySelector('.totop');
    var toggle=0;
    topBtn.onclick=function(){
        
        if(toggle==0){
            bodyAside.style.right=0;
            this.querySelector('img').src='images/cross.png';
            toggle=1;
        }else{
            bodyAside.style.right=-294+'px';
            this.querySelector('img').src='images/list.png';
            toggle=0;
        }
        
    }
    lis.forEach(function(item,index){
        item.onmouseenter=function(){
            // console.log(this);
            this.lastElementChild.style.left=-60+'px'
        }
        item.onmouseleave=function(){
            this.lastElementChild.style.left=0
        }
    })
    console.log(toTop);
    toTop.onmouseenter=function(){
        this.lastElementChild.style.left=-60+'px'
    }
    toTop.onmouseleave=function(){
        this.lastElementChild.style.left=0
    }
    toTop.onclick=function(){
        (document.documentElement||document.body).scrollTo({
            top:0,
            behavior:"smooth"
        })
    }

})();